<template>
  <div class="nav">
    <ul class="nav-list">
      <li class="item" v-for="(item, index) in mavList" :class="{'active' : nowIndex === index }" @click="tabClick(index)" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mavList: [
        { name: '我的' },
        { name: '发现' },
        { name: '歌手' },
        { name: '搜索' }
      ],
      nowIndex: 0,
      that: this
    }
  },
  mounted () {
    this.$root.eventHub.$on('slideTab', this.slideTab)
    this.$nextTick(() => {
      this.initPage()
    })
    // console.log(this.nowIndex)
  },
  methods: {
    initPage () {
      var paths = this.that.$router.history.current.path
      this.nowIndex = paths === '/mine' ? 0 : paths === '/find' ? 1 : paths === '/clouds' ? 2 : paths === '/videos' ? 3 : 0
      this.$root.eventHub.$emit('changeTab', this.nowIndex)
    },
    tabClick (index) {
      this.nowIndex = index
      this.$root.eventHub.$emit('changeTab', index)
      this.slideTab(index)
    },
    slideTab (index) {
      this.nowIndex = index
      const href = index === 0 ? '/mine' : index === 1 ? '/find' : index === 2 ? '/clouds' : index === 3 ? '/videos' : '/mine'
      console.log(this.that.$router.history.current.path)
      this.that.$router.push(href)
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  /*margin-bottom: 20px;*/
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 99;
  background-color: red;
  .nav-list {
    width: 100%;
    overflow: hidden;
    .item {
      width: 20%;
      display: inline-block;
      color: #ccc;
      text-align: center;
      height: 60px;
      line-height: 60px;
      &.active {
        color: #000;
        font-weight: bold;
        /*background-color: #ccc;*/
      }
    }
  }
}
</style>
